<template>
  <div>
    <div class="app">
      <!-- 头部 -->
      <div class="header">
        <div class="logo">
          <span class="spanimg" @click="Jump_home"></span
          ><span class="longspan">搜索分类</span>
        </div>
      </div>
      <!-- 搜索框  -->
      <div class="search-content">
        <input
          type="text"
          class="search-input"
          v-model="text"
          @keyup.enter="searchlist"
        />
        <div class="search-text" @click="searchlist">搜索</div>
      </div>
      <!-- 漫画分类 -->
      <div id="scroller" v-show="!islike">
        <div
          class="comic-info-content"
          v-for="item in lists"
          :key="item.comic_id"
          @click="Jump_pre(item.comic_id, item.comic_name)"
        >
          <div class="comic-img">
            <img :src="item.cover_img" alt="" />
          </div>
          <div class="comic-cover2"></div>
          <div class="mask-triangle"></div>
          <div class="img-box">
            <img :src="item.cover_img" />
          </div>
          <div class="comic-info-box">
            <strong class="comic-title">{{ item.comic_name }}</strong>
            <div class="comic-renqi">
              人气：<span>{{ item.renqi | playCountNum }}</span>
            </div>
            <div class="author-name">{{ item.cartoon_desc }}</div>
          </div>
        </div>
        <van-empty
          class="custom-image"
          image="https://static.u17i.com/m/mobile2017/images/yaoqiniang1.png"
          description="未找到漫画"
          v-show="disp"
        />
      </div>

      <!-- 历史记录 -->
      <div class="lsss" v-show="islike">
        <div class="guess-title">
          <span class="spantext spantext1">历史搜索</span>
        </div>
        <ul v-show="issearch">
          <li v-for="item in searcharr" :key="item.searchval">
            <p id="divspan" @click="getlsss(item.searchval)">
              {{ item.searchval }}
            </p>
            <i @click="remove(item.searchval)"></i>
          </li>
        </ul>
        <van-empty image="error" description="暂无搜索" v-show="!issearch" />
      </div>

      <!-- 猜你喜欢 -->
      <div class="guess-box" v-show="islike">
        <div class="guess-title">
          <span class="spantext">猜你喜欢</span>
        </div>
        <ListComponents
          :likelist="likelist"
          @getlikelistid="getlikelistid"
          @getlikename="getlikename"
        ></ListComponents>
      </div>
      <!-- 尾部广告模块 -->
      <!-- <div class="register-download">

            </div> -->
    </div>
  </div>
</template>
<script>
import ListComponents from "../components/ListComponents";
export default {
  data() {
    return {
      falg: false, //显示隐藏
      text: "",
      lists: "", //搜索
      disp: false,
      islike: true,
      likelist: "", //猜你喜欢
      likelistid: "",
      likename: "",
      searcharr: "", //历史搜索
      issearch: true,
    };
  },

  created() {
    console.log(typeof this.lists);
    this.getlike();
    //  search
    if (window.localStorage.getItem("search") == null) {
      window.localStorage.setItem("search", "[]");
    }
    let searchlist = window.localStorage.getItem("search");
    searchlist = JSON.parse(searchlist);
    this.searcharr = searchlist;
  },
  methods: {
    Jump_home() {
      this.$router.go(-1);
    },
    Jump_pre(id, name) {
      this.$emit("getid", id);
      this.$router.push({ name: "pre" });
      this.$emit("getcomicname", name);
    },
    //切换显示隐藏
    falgs() {
      this.falg = !this.falg;
    },
    getSearch() {
      if (this.text == "") {
        return;
      }
      this.$axios({
        url: `https://www.kanman.com/api/getsortlist?search_key=${this.text}`,
        method: "get",
      }).then((data) => {
        this.lists = data.data.data;
      });
    },
    //获取猜你喜欢
    getlike() {
      this.$axios({
        url: `https://www.kanman.com/api/getsortlist?search_key`,
        method: "get",
      }).then((data) => {
        console.log(data.data.data);
        this.likelist = data.data.data.slice(0, 6);

        console.log(this.likelist);
      });
    },
    //点击搜索
    searchlist() {
      let searchlist = window.localStorage.getItem("search");
      searchlist = JSON.parse(searchlist);
      searchlist = searchlist.filter((item) => {
        return item.searchval != this.text;
      });
      searchlist.push({ searchval: this.text });
      searchlist = JSON.stringify(searchlist);
      window.localStorage.setItem("search", searchlist);
      this.getSearch();
    },
    getlikename(name) {
      this.likename = name;
    },
    getlikelistid(id) {
      this.likelistid = id;
    },
    //历史记录搜索
    getlsss(val) {
      this.text = val;
      this.getSearch();
    },
    //历史记录删除
    remove(val) {
      console.log(val);
      let searchlist = window.localStorage.getItem("search");
      searchlist = JSON.parse(searchlist);
      searchlist = searchlist.filter((item) => {
        return item.searchval != val;
      });
      this.searcharr = searchlist;
      searchlist = JSON.stringify(searchlist);
      window.localStorage.setItem("search", searchlist);
    },
  },
  watch: {
    text() {
      if (this.text == "") {
        this.islike = true;
        this.lists = "";
        let searchlist = window.localStorage.getItem("search");
        searchlist = JSON.parse(searchlist);
        this.searcharr = searchlist;
      } else {
        this.islike = false;
      }
    },
    lists() {
      if (this.lists.length == 0 && typeof this.lists == "object") {
        console.log(1);
        this.disp = true;
      } else {
        this.disp = false;
      }
    },
    likelistid() {
      // console.log('gbl');
      this.$emit("getid", this.likelistid);
      this.$emit("getcomicname", this.likename);
      this.$router.push({ name: "pre" });
    },
    searcharr() {
      if (this.searcharr.length == 0) {
        this.issearch = false;
      } else {
        this.issearch = true;
      }
    },
  },
  filters: {
    playCountNum(value) {
      //134567897
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算

      return y;
    },
  },
  components: {
    ListComponents,
  },
};
</script>
<style scoped>
li {
  list-style: none;
}
/* 头部 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 53px;
  background-color: #fff;
  padding: 13px 13px 0 13px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #b3b3b3;
  z-index: 999;
}
.logo {
  width: 130px;
  height: 26.5px;
  margin-right: 80px;
  line-height: 26.5px;
}
.spanimg {
  display: inline-block;
  width: 18px;
  height: 30px;
  background: url(../../public/assets/images-index/zjt.png) no-repeat;
  background-size: 70% 70%;
}
.longspan {
  font-size: 18px;
  display: inline-block;
  color: #333;
  margin-left: 12px;
  font-weight: 800;
  position: relative;
  top: -13px;
}

/* 搜索部分 */
.search-content {
  position: relative;
  box-sizing: border-box;
  margin-top: 53px;
  width: 100%;
  height: 68px;
  padding: 13px 15px 0 15px;
}
.search-content > input {
  outline: none;
  resize: none;
  border: 1px solid #49dda1;
  width: 313px;
  height: 37px;
  padding-left: 15px;
  border-radius: 30px;
}
.search-text {
  width: 65px;
  height: 39px;
  position: absolute;
  color: #fff;
  background-color: #49dda1;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  text-align: center;
  line-height: 37px;
  top: 14px;
  right: 29px;
  z-index: 666;
}
/* 漫画简介 */
.comic-info-content {
  position: relative;
  width: 100%;
  height: 175px;
  border-bottom: 1px solid #f2f2f2;
  color: #fff;
  overflow: hidden;
}

.comic-info-content #comic-cover {
  position: absolute;
  width: 100%;
  height: 166px;
  left: 0;
  top: 0;
  z-index: 55;
}
.comic-img {
  position: relative;
  width: 100%;
  height: 166px;
}
.comic-img img {
  filter: blur(10px);
  width: 100%;
  height: 100%;
}
.comic-info-content .comic-cover2 {
  position: absolute;
  width: 100%;
  height: 166px;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.comic-info-content .comic-cover2 {
  position: absolute;
  width: 100%;
  height: 166px;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.comic-info-content .mask-triangle {
  position: absolute;
  bottom: 9px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 0px solid transparent; /*左顶点到上顶点的水平距离*/
  border-right: 375px solid transparent; /*右顶点到上顶点的水平距离*/
  border-bottom: 70px solid #fff; /*底线到上顶点的水平距离*/
}
.comic-info-content .img-box {
  position: absolute;
  width: 119px;
  height: 149.5px;
  top: 14.5px;
  left: 9px;
  border: 1px solid #fff;
  border-radius: 6px;
  overflow: hidden;
}
.comic-info-content .img-box img {
  width: 100%;
  height: 100%;
}
.comic-info-content .comic-info-box {
  position: absolute;
  z-index: 2;
  color: #fff;
  top: 18px;
  left: 142px;
}
.comic-info-content .comic-title {
  display: block;
  height: 26px;
  line-height: 26px;
}
.comic-info-content .comic-info-box .comic-renqi,
.author-name {
  width: 70%;
  font-size: 12px;
  line-height: 17px;
  margin-top: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.comic-info-content .comic-info-box .comic-renqi span {
  font-size: 12px;
  line-height: 17px;
  color: #ff655d;
}

/* 尾部广告模块  */
.register-download {
  z-index: 66;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 73.5px;
  background: url(../../public/assets/images-index/foot.png);
  background-size: 100% 100%;
}
.spantext {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  font-weight: 700;
  margin-left: 20px;
}
.guess-title {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
}
.spantext1 {
  font-size: 18px;
  background: -webkit-linear-gradient(315deg, #092a86 25%, #1f88a8);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lsss {
  width: 100%;
}
.lsss ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.lsss li {
  position: relative;
  width: 30%;
  height: 25px;
  line-height: 25px;
  /* background: #42d392; */
  border-radius: 20px;
  border: 1px solid #b3b3b3;

  margin: 5px 3px;
}
.lsss li i {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 7px;
  right: 5px;
  background: url(../../public/assets/images-index/lssc.png);
  background-size: 100% 100%;
}
ul li p {
  max-width: 85%;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #747474;
  text-align: center;
  /* -o-text-overflow: ellipsis; */
}
</style>